<template>
  <div>
    <div class="top-box">
      <!-- 资产 -->
      <ul class="zc">
        <li>
          <div class="zc-y"></div>
          <p>资产</p>
        </li>
        <li>
          <h2>0</h2>
          <p>已失陷</p>
        </li>
        <li>
          <h2>4</h2>
          <p>有风险</p>
        </li>
        <li>
          <h2>4</h2>
          <p>总数</p>
        </li>
      </ul>
      <!-- 威胁事件 -->
      <ul class="wx">
        <li>
          <div class="wx-y"></div>
          <p>威胁事件</p>
        </li>
        <li>
          <h2>0</h2>
          <p>攻击成功</p>
        </li>
        <li>
          <h2>4</h2>
          <p>总数</p>
        </li>
      </ul>
      <!-- 漏洞 -->
      <ul class="ld">
        <li>
          <div class="ld-y"></div>
          <p>漏洞</p>
        </li>
        <li>
          <h2>0</h2>
          <p>高危</p>
        </li>
        <li>
          <h2>4</h2>
          <p>总数</p>
        </li>
      </ul>
    </div>
    <div class="botton-box">
      <!-- 资产异常图 -->
      <div class="zcyct" id="zcyct">
        <Line />
      </div>
      <!-- 风险资产TOPS -->
      <div class="fxzc">
        <h2>风险资产TOPS</h2>
        <div class="title">
          <el-table :data="tableData" style="width: 100% font-size；12px">
            <el-table-column prop="id" label="#" width="50"> </el-table-column>
            <el-table-column prop="ip" label="资产IP" width="106">
            </el-table-column>
            <el-table-column prop="region" label="区域" width="96">
            </el-table-column>
            <el-table-column prop="type" label="资产类型" width="90">
            </el-table-column>
            <el-table-column prop="price" label="资产价值" width="80">
              <template #default="scope">
                <el-button type="danger" size="small">
                  {{ scope.row.price }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="risk" label="风险" width="66">
              <template #default="scope">
                <el-button type="danger" size="small">{{
                  scope.row.risk
                }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Line from "@/components/Line.vue";

export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          ip: "192.168.1.1",
          region: "A-1栋",
          type: "终端",
          price: "低",
          risk: "低",
        },
        {
          id: "2",
          ip: "192.168.1.1",
          region: "A-2栋",
          type: "服务器",
          price: "中",
          risk: "中",
        },
        {
          id: "3",
          ip: "192.168.1.1",
          region: "A-3栋",
          type: "终端",
          price: "低",
          risk: "低",
        },
      ],
    };
  },
  components: {
    Line,
  },
};
</script>
<style lang="less" scoped>
body {
  background-color: #f5f6fa;
}
.right {
  .top-box {
    display: flex;
    justify-content: space-between;
    padding: 0 25px 0 0;
    .zc {
      border-radius: 4px;
      background-color: #33cabb;
      .zc-y {
        margin-bottom: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-image: url(../assets/images/zj.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: 50%, 50%;
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
    .wx {
      border-radius: 4px;
      background-color: #f96868;
      .wx-y {
        margin-bottom: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-image: url(../assets/images/jg.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: 50%, 50%;
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
    .ld {
      border-radius: 4px;
      background-color: #15c377;
      .ld-y {
        margin-bottom: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-image: url(../assets/images/ld.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: 50%, 50%;
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
    ul {
      flex: 1;
      display: flex;
      margin: 0;
      padding: 0;
      justify-content: space-around;
      padding: 10px;
      margin-left: 20px;
      li {
        text-align: center;
        color: white;
        h2 {
          margin: 10px 0;
          font-size: 38px;
          line-height: 1.2;
          font-weight: 500;
        }
        p {
          margin-top: 0;
          font-size: 16px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .botton-box {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 25px 0 0;
    .zcyct {
      margin-left: 20px;
      min-height: 300px;
      flex: 2;
      background-color: white;
    }
    .fxzc {
      flex: 2.5;
      margin-left: 20px;
      background-color: white;
      h2 {
        margin: 0;
        font-size: 18px;
      }
      .el-table__body {
        .el-table_1_column_5 {
          .cell {
            background-color: orange;
          }
        }
        .el-table_1_column_6 {
          background-color: orange;
        }
      }
    }
  }
}
li,
dl {
  list-style: none;
}
</style>
